import styled from "@emotion/styled"
import { css, keyframes } from "@emotion/react"
import { motion } from "motion/react"

interface ProgressDotProps {
    progress: number // 百分比位置 0-100
    size?: number // rem
    color?: string
    animated?: boolean
    duration?: number // 动画持续时间
}
type DotWrapperProps = {
    progress: number
}
type DotProps = {
    size: number
    color: string
    animated: boolean
}

const pulse = keyframes`
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.8;
  }
`

const DotWrapper = styled(motion.div)<DotWrapperProps>`
    position: absolute;
    top: 1rem;
    left: ${({ progress }) => `calc(${progress}% - 2rem)`};
    transform: translate(-50%, -50%);
    z-index: 3;
`

const Dot = styled.div<DotProps>`
    width: ${({ size }) => size}rem;
    height: ${({ size }) => size}rem;
    background-color: ${({ color }) => color};
    border-radius: 50%;
    filter: blur(2px);
    box-shadow: ${({ color }) => `
    0 0 8px 4px ${color}99,
    0 0 16px 10px ${color}66,
    0 0 32px 16px ${color}33
  `};
    ${({ animated }) =>
        animated &&
        css`
            animation: ${pulse} 2s infinite ease-in-out;
        `}
`

export default function ProgressDot({
    progress,
    size = 4,
    color = "#ffffff",
    animated = true,
    duration = 2,
}: ProgressDotProps) {
    return (
        <DotWrapper
            initial={{ left: `calc(0% - 2rem)` }}
            animate={{ left: `calc(${progress}% - 2rem)` }}
            transition={{ duration, ease: "easeOut" }}
            progress={progress}
        >
            <Dot
                size={size}
                color={color}
                animated={animated}
            />
        </DotWrapper>
    )
}
